-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix tooltip text overflow #41703
Fix tooltip text overflow #41703
Conversation
💚 Build Succeeded |
Pinging @elastic/kibana-app |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested locally, LGTM. Just a few comments.
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -97,6 +102,42 @@ Tooltip.prototype.show = function () { | |||
left: placement.left, | |||
top: placement.top | |||
}); | |||
const tooltipColumns = $tooltip.find('tbody > tr:nth-of-type(1) > td').length; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like a lot of match and element targeting. I'd suggest highly commenting on what is going on so others can follow in case anything needs to be adjusted.
@markov00 once ready, any chance we can backport this fix ? |
@AlonaNadler we will backport this to 7.4, but I think backporting it to a patch release like 7.3.1 or older is a bit out out the usual scope of patch release in kibana, what do you think? |
@cchaos as agreed in our zoom call, I've reverted back the css changes to use directly: overflow-wrap: break-word;
word-wrap: break-word; On IE11 can slightly differ of few pixel/chars probably because of some differences in text size computation. |
💚 Build Succeeded |
@CME64 Thanks for reporting this bug. Your issue is actually a different component than that mentioned in this issue. Could you please open a new issue so we can track and prioritize it accordingly. |
Summary
This PR fix the text overflow of tooltips on point series and on pie charts.
The tooltip is build with a table, each column needs to be configured to break long text strings into multiple lines. To achieve this we need to specify a max-width to the container of the cell.
That
max-width
is the available space on the tooltip minus the column width used for displaying the data value. Whenever possible we want to keep the value column with his maximum extent (to avoid breaking its text into new lines), so we apply the breaking style to the other columns.Only in one case we apply the breaking on the value column is in the case the value column is larger than half of the max tooltip width.
before:
after:
before:
after:
fix #31846
fix #41039
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support[ ] Documentation was added for features that require explanation or tutorials[ ] This was checked for keyboard-only and screenreader accessibilityFor maintainers
[ ] This was checked for breaking API changes and was labeled appropriately[ ] This includes a feature addition or change that requires a release note and was labeled appropriately